@use './mixin.scss' as *;

.o-card-detail-limited {
  --card-detail-mask-bg-color: var(--o-color-control-light);
  --card-detail-mask-width: 4em;
  --card-detail-mask-heigt: var(--card-content-text-height);

  position: relative;
  display: block;
  text-overflow: clip;

  &::after {
    background-image: linear-gradient(90deg, hsla(0, 0%, 93%, 0), hsla(0, 0%, 100%, 0.8) 59%, var(--card-detail-mask-bg-color) 100%);
    bottom: 0;
    content: '';
    pointer-events: none;
    position: absolute;
    right: 0;
    width: var(--card-detail-mask-width);
    height: var(--card-content-text-height);
  }
}

.c-card-kunpeng {
  &.o-card {
    --card-shadow: none;
    --card-shadow-hover: none;
    --card-shadow-active: none;
    --card-radius: var(--o-radius-xl);
    --card-cover-radius: var(--o-radius-xl) !important;
    --card-icon-size: 48px;
  }

  .o-card-cover-v,
  .o-card-cover-h,
  .o-card-cover-hr {
    --card-cover-padding: 0 !important;
  }

  &.o-card-hoverable {
    .o-card-icon {
      transition: color var(--o-duration-s) var(--o-easing-standard);
    }
    @include hover {
      .o-card-icon {
        color: rgb(var(--o-red-huawei));
      }
    }
  }

  &.o-card-hoverable.o-card-cursor-pointer {
    .o-card-title {
      transition: color var(--o-duration-s) var(--o-easing-standard);
    }
    @include hover {
      .o-card-title {
        color: rgb(var(--o-red-huawei));
      }
    }
  }
}

@include respond-to('pad_h') {
  .c-card-kunpeng {
    &.o-card {
      &:not(.o-card-no-responsive) {
        --card-icon-size: var(--o-icon_size_control-xl);
      }
    }
  }
}

@include respond-to('pad_v') {
  .c-card-kunpeng {
    &.o-card {
      &:not(.o-card-no-responsive) {
        --card-icon-size: var(--o-icon_size_control-l);
      }
    }
  }
}

@include respond-to('phone') {
  .c-card-kunpeng {
    &.o-card {
      --card-icon-size: var(--o-icon_size_control-l);

      .o-card-cover-v {
        .o-card-cover-img {
          border-top-left-radius: var(--card-cover-radius);
          border-top-right-radius: var(--card-cover-radius);
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;

          img {
            border-top-left-radius: var(--card-cover-radius);
            border-top-right-radius: var(--card-cover-radius);
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
          }
        }
      }

      .o-card-cover-h {
        .o-card-cover-img {
          border-top-left-radius: var(--card-cover-radius);
          border-top-right-radius: 0;
          border-bottom-left-radius: var(--card-cover-radius);
          border-bottom-right-radius: 0;

          img {
            border-top-left-radius: var(--card-cover-radius);
            border-top-right-radius: 0;
            border-bottom-left-radius: var(--card-cover-radius);
            border-bottom-right-radius: 0;
          }
        }
      }

      .o-card-cover-hr {
        .o-card-cover-img {
          border-top-left-radius: 0;
          border-top-right-radius: var(--card-cover-radius);
          border-bottom-left-radius: 0;
          border-bottom-right-radius: var(--card-cover-radius);

          img {
            border-top-left-radius: 0;
            border-top-right-radius: var(--card-cover-radius);
            border-bottom-left-radius: 0;
            border-bottom-right-radius: var(--card-cover-radius);
          }
        }
      }
    }
  }
}
